<template>
  <div class="options-box">
    <template v-for="(item, index) in optionItems">
      <el-button size="mini" slot="reference" v-if="item.type == 'braid-table'" @click="setTable(item)">{{ item.title
      }}</el-button>
      <el-button v-if="item.type != 'braid-table'" size="mini" :key="index" @click="(e) => { addTempItem(e, item) }">{{
        item.title }}</el-button>
    </template>
    <!-- 表格内容修改的弹窗 -->
    <tableEdit ref="tableEdit" @ok="addTempItem"></tableEdit>
  </div>
</template>

<script>
import tableEdit from './tableEdit.vue'
export default {
  components: { tableEdit },
  data() {
    return {
      tablePopover: false,
      tableList: {},
      columnsAttr: [],
    }
  },
  computed: {
    optionItems() {
      return this.$vptd.state.optionItems
    },
  },
  methods: {
    setTable(item) {
      this.$refs.tableEdit.isShow(item)
    },
    // 添加组件
    addTempItem(e, item) {
      switch (item.type) {
        case 'braid-table': {
          let selectCol = []
          item.selectCol.forEach((itemName) => {
            let colInfo = item.columnsAttr.find((col) => col.name === itemName)
            if (colInfo) {
              selectCol.push(colInfo)
            }
          })
          item.columns = selectCol //表格显示的字段
          this.$vptd.dispatch('addTempItem', item)
          this.tablePopover = false
          break
        }
        default:
          this.$vptd.dispatch('addTempItem', item)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.options-box {
  .el-button {
    margin-bottom: 10px;
    margin-right: 10px;
    margin-left: 0;
  }
}
</style>
